<template>
    <div>
      <div class="ls_maincont"></div>
      <!-- <canvas id="canvas" width="800" height="600" ></canvas> -->
      <div class="mainDiv fpl_c">
        <div class="r">
          <div class="stage_c_r main_3 fpl_item">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span  style="color: white; font-size: 30px;">A层着火燃烧稳定性(%)</span>
                </div>
              </div>
            </div>
            <div class="d d2 zhu">
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[0] + '%'  }"  style="background-color: green;"   v-if="warnings[0]===0" ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[0] + '%'  }"  style="background-color: green;"   v-if="warnings[0]===1" ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[0] + '%'  }"  style="background-color: red;"   v-if="warnings[0]===2" ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;" id="zhu_down">A1</div>
                <div style="color: white;">{{ list[0] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[1] + '%'  }"  style="background-color: green;"   v-if="warnings[1]===0" ></div>
                  <div class="wendutiao_react nomal" :style="{ height: list[1] + '%' }" style="background-color: yellow"   v-if="warnings[1]===1" ></div>
                  <div class="wendutiao_react nomal" :style="{ height: list[1] + '%' }" style="background-color: red;"   v-if="warnings[1]===2" ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">A2 </div>
                <div style="color: white;">{{ list[1] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[2] + '%' }"  style="background-color: green;"  v-if="warnings[2]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[2] + '%' }"  style="background-color: yellow;"  v-if="warnings[2]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[2] + '%' }"  style="background-color: red;"  v-if="warnings[2]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">A3 </div>
                <div style="color: white;">{{ list[2] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[3] + '%' }"  style="background-color: green;"  v-if="warnings[3]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[3] + '%' }"  style="background-color: yellow;"  v-if="warnings[3]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[3] + '%' }"  style="background-color: red;"  v-if="warnings[3]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">A4 </div>
                <div style="color: white;">{{ list[3] }}%</div>
              
              </div>
            </div>
          </div>
          <div class="stage_c_r main_3 fpl_item">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span style="color: white; font-size: 30px;">B层着火燃烧稳定性(%)</span>
                </div>
              </div>
            </div>
            <div class="d d2 zhu">
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[4] + '%' }"  style="background-color: green;"  v-if="warnings[4]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[4] + '%' }"  style="background-color: yellow;"  v-if="warnings[4]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[4] + '%' }"  style="background-color: red;"  v-if="warnings[4]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">B1 </div>
                <div style="color: white;">{{ list[4] }}%</div>
             
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[5] + '%' }"  style="background-color: green;"  v-if="warnings[5]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[5] + '%' }"  style="background-color: yellow;"  v-if="warnings[5]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[5] + '%' }"  style="background-color: red;"  v-if="warnings[5]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">B2 </div>
                <div style="color: white;">{{ list[5] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[6] + '%' }"  style="background-color: green;"  v-if="warnings[6]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[6] + '%' }"  style="background-color: yellow;"  v-if="warnings[6]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[6] + '%' }"  style="background-color: red;"  v-if="warnings[6]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">B3 </div>
                <div style="color: white;">{{ list[6] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[7] + '%' }"  style="background-color: green;"  v-if="warnings[7]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[7] + '%' }"  style="background-color: yellow;"  v-if="warnings[7]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[7] + '%' }"  style="background-color: red;"  v-if="warnings[7]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">B4 </div>
                <div style="color: white;">{{ list[7] }}%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="r">
          <div class="stage_c_r main_3 fpl_item">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span style="color: white; font-size: 30px;">C层着火燃烧稳定性(%)</span>
                </div>
              </div>
            </div>
            <div class="d d2 zhu">
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[8] + '%' }"  style="background-color: green;"  v-if="warnings[8]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[8] + '%' }"  style="background-color: yellow;"  v-if="warnings[8]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[8] + '%' }"  style="background-color: red;"  v-if="warnings[8]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">C1 </div>
                <div style="color: white;">{{ list[8] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[9] + '%' }"  style="background-color: green;"  v-if="warnings[9]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[9] + '%' }"  style="background-color: yellow;"  v-if="warnings[9]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[9] + '%' }"  style="background-color: red;"  v-if="warnings[9]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">C2</div>
                <div style="color: white;">{{ list[9] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[10] + '%' }"  style="background-color: green;"  v-if="warnings[10]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[10] + '%' }"  style="background-color: yellow;"  v-if="warnings[10]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[10] + '%' }"  style="background-color: red;"  v-if="warnings[10]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">C3 </div>
                <div style="color: white;">{{ list[10] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[11] + '%' }"  style="background-color: green;"  v-if="warnings[11]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[11] + '%' }"  style="background-color: yellow;"  v-if="warnings[11]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[11] + '%' }"  style="background-color: red;"  v-if="warnings[11]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">C4 </div>
                <div style="color: white;">{{ list[11] }}%</div>
              </div>
            </div>
          </div>
          <div class="stage_c_r main_3 fpl_item">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span style="color: white; font-size: 30px;">D层着火燃烧稳定性(%)</span>
                </div>
              </div>
            </div>
            <div class="d d2 zhu">
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[12] + '%' }"  style="background-color: green;"  v-if="warnings[12]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[12] + '%' }"  style="background-color: yellow;"  v-if="warnings[12]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[12] + '%' }"  style="background-color: red;"  v-if="warnings[12]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;" >D1 </div>
                <div style="color: white;">{{ list[12] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[13] + '%' }"  style="background-color: green;"  v-if="warnings[13]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[13] + '%' }"  style="background-color: yellow;"  v-if="warnings[13]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[13] + '%' }"  style="background-color: red;"  v-if="warnings[13]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">D2 </div>
                <div style="color: white;">{{ list[13] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[14] + '%' }"  style="background-color: green;"  v-if="warnings[14]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[14] + '%' }"  style="background-color: yellow;"  v-if="warnings[14]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[14] + '%' }"  style="background-color: red;"  v-if="warnings[14]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">D3 </div>
                <div style="color: white;">{{ list[14] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[15] + '%' }"  style="background-color: green;"  v-if="warnings[15]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[15] + '%' }"  style="background-color: yellow;"  v-if="warnings[15]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[15] + '%' }"  style="background-color: red;"  v-if="warnings[15]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">D4 </div>
                <div style="color: white;">{{ list[15] }}%</div>
              </div>
            </div>
          </div>
          <div class="stage_c_r main_3 fpl_item">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span style="color: white; font-size: 30px;">E层着火燃烧稳定性(%)</span>
                </div>
              </div>
            </div>
            <div class="d d2 zhu">
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[16] + '%' }"  style="background-color: green;"  v-if="warnings[16]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[16] + '%' }"  style="background-color: yellow;"  v-if="warnings[16]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[16] + '%' }"  style="background-color: red;"  v-if="warnings[16]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">E1 </div>
                <div style="color: white;">{{ list[16] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[17] + '%' }"  style="background-color: green;"  v-if="warnings[17]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[17] + '%' }"  style="background-color: yellow;"  v-if="warnings[17]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[17] + '%' }"  style="background-color: red;"  v-if="warnings[17]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">E2 </div>
                <div style="color: white;">{{ list[17] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[18] + '%' }"  style="background-color: green;"  v-if="warnings[18]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[18] + '%' }"  style="background-color: yellow;"  v-if="warnings[18]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[18] + '%' }"  style="background-color: red;"  v-if="warnings[18]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">E3 </div>
                <div style="color: white;">{{ list[18] }}%</div>
              </div>
              <div class="zhu_c">
                <div class="zhu_top">
                  <div class="wendutiao_react nomal"  :style="{ height: list[19] + '%' }"  style="background-color: green;"  v-if="warnings[19]===0"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[19] + '%' }"  style="background-color: yellow;"  v-if="warnings[19]===1"   ></div>
                  <div class="wendutiao_react nomal"  :style="{ height: list[19] + '%' }"  style="background-color: red;"  v-if="warnings[19]===2"   ></div>
                  <div class="wendutiao_text">
                    <span style="color: white;">100</span>
                    <span style="color: white;">75</span>
                    <span style="color: white;">50</span>
                    <span style="color: white;">25</span>
                    <span style="color: white;">0</span>
                  </div>
                </div>
                <div class="zhu_down" style="color: white;">E4 </div>
                 <div style="color: white;">{{ list[19] }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="stage_t">
        <div class="stage_t_left">  
            <img src="../assets/logins.jpg" alt=""> <span>国能怀安热电有限公司</span>
       </div>
       <div  class="stage_t_zhong">燃烧数字化监测与可视化系统</div>
       <div  class="stage_t_right">
           <img src="../assets/timer.png" alt=""> <span>{{ nowTime }}</span>
       </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from "vue";
  import { formatTime } from "../utils/date.js";
  import { postranshaowendingxingapi } from "../api/ranshaowendingxing";
  const nowTime = ref("");
  onMounted(() => {
    setInterval(() => {
      nowTime.value = formatTime(new Date());
    });
    tuxing()
  });
  let timer = 0;
  // 列表
  let list=ref([]);
  // 报警
  let warnings=ref([]);
  let tuxing = async () => {
    clearInterval(timer);
    const res = await postranshaowendingxingapi();
    list.value=[];
    warnings.value=[];
    res.data.stabilitys.map(item=>{
      list.value.push(item)
    })
    res.data.warnings2.map(item=>{
      warnings.value.push(item)
    })
    timer = setTimeout(() => {
      tuxing();
    }, 4000);
  }
  </script>
  
  <style lang="scss" scoped></style>
  